<template>
    <view class="datetime-container">
        <view class="date-info">{{ formattedDate }}</view>
        <view class="week-info">{{ formattedWeek }}</view> 
		<view class="time-info">{{ formattedTime }}</view>
    </view>
</template>

<script>
export default {
    name: 'DateTime',
    data() {
        return {
            currentDate: new Date(),
            timer: null
        }
    },
    computed: {
        // 格式化日期：年-月-日
        formattedDate() {
            const year = this.currentDate.getFullYear();
            const month = this.padZero(this.currentDate.getMonth() + 1);
            const day = this.padZero(this.currentDate.getDate());
            return `${year}-${month}-${day}`;
        },
        // 格式化时间：时:分:秒
        formattedTime() {
            const hours = this.padZero(this.currentDate.getHours());
            const minutes = this.padZero(this.currentDate.getMinutes());
            const seconds = this.padZero(this.currentDate.getSeconds());
            return `${hours}:${minutes}:${seconds}`;
        },
        // 格式化星期
        formattedWeek() {
            const weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            return weeks[this.currentDate.getDay()];
        }
    },
    created() {
        // 初始化时间
        this.updateTime();
        // 设置定时器每秒更新一次
        this.timer = setInterval(() => {
            this.updateTime();
        }, 1000);
    },
    beforeDestroy() {
        // 组件销毁前清除定时器
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = null;
        }
    },
    methods: {
        // 数字补零方法
        padZero(num) {
            return num < 10 ? '0' + num : num;
        },
        // 更新时间方法
        updateTime() {
            this.currentDate = new Date();
        }
    }
}
</script>

<style>
.datetime-container {
	display: flex;
	align-items: center;
    padding: 10px 20rpx;
    text-align: center;
	font-size: 28rpx;
	font-weight: 600;
}

.date-info {
    color: #333;
	margin: 0 10rpx;
}
.time-info {
    color: #007AFF;
		margin: 0 10rpx;
}
.week-info {
		margin: 0 10rpx;
    color: #666;
}
</style>    